<template>
<el-card class="box-card" style="width: 1180px">
  <el-table :data="tableData" border style="width: 60%;margin: 20px auto">
        <el-table-column prop="id" label="角色编号" > </el-table-column>
        <el-table-column prop="name" label="角色名称">
        </el-table-column>
        
        <el-table-column label="操作" width="160" align="center">
          <template slot-scope="scope">           
             <el-button
                type="danger"
                size="mini"
                @click="assignPermission(scope.row.id)"
                >分配权限</el-button
              >
          </template>
         
        </el-table-column>
        
      </el-table>
       <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="query.currentPage"
      :page-sizes="page.pageSizes"
      :page-size="query.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="page.total">
    </el-pagination>
      </el-card>
</template>

<script>
export default {
  data() {
    return {
        tableData:[],
        // 分页
       page:{
        pageSizes:[5, 10, 20, 50, 100],
        total:0
      },
         query:{
        currentPage:1,
        pageSize:5,
        name:"",
        dateRange: [],
      },
    };
  },
  methods: {
    // 根据id跳转对应权限分配
    assignPermission(rid){
      this.$router.push({path:"/userEmp/role",query:{rid:rid}})
    },
     //当每页显示条数改变时
    handleSizeChange(size) {      
      this.query.pageSize = size;
      this.loadData();
    },
    //当页数改变时
    handleCurrentChange(currentPage) {     
      this.query.currentPage = currentPage;
      this.loadData();
    },
    loadData(){
        this.$axios.post("http://localhost:9000/userEmp/selAll",this.query)
        .then(res=>{
            if(res.data.code==200){
                this.tableData=res.data.data.userList;
                this.page.total = res.data.data.total;
            }
        }).catch(error=>{
            this.$message.error("出错了");
        })
        
    }        
  },
  mounted(){
    this.loadData();
  }
};
</script>